<template>
	<view class="container">
		<view class="mb-40 font-size-medium" style="border-left: 2rpx solid #f3c45d; padding-left: 20rpx">快捷标签</view>
		<view class="remarks">
			<view class="remark" :class="{ active: remark.active }" v-for="(remark, index) in remarks" :key="index" @tap="choose(index)">
				{{ remark.label }}
			</view>
		</view>
		<view class="textarea-box">
			<textarea class="textarea" v-model="remark" placeholder-class="placeholder" :maxlength="50" @input="handleTextareaInput"></textarea>
			<!-- <view class="tips">{{ remark.length }} / 50</view> -->
			<view class="tips" style="margin-top: 10rpx">{{ remarkLength }} / 50</view>
		</view>
		<button type="info" class="w-100 font-size-extra-lg border-radius-lg" style="margin-top: 50rpx; background-color: #f3c45d; color: #fff" @tap="submit">提交</button>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			remarks: [
				{ label: '打包', active: 0 },
				{ label: '不打包', active: 0 },
				{ label: '放在前台', active: 0 }
			],
			remark: ''
		};
	},
	computed: {
		remarkLength() {
			if (this.remark) {
				return this.remark.length;
			} else {
				return 0;
			}
		}
	},
	onShow() {
		this.remark = this.$store.state.remark;
		this.remarks.forEach((item) => item.label == this.remark && (item.active = 1));
	},
	methods: {
		...mapMutations(['SET_REMARK']),
		choose(index) {
			this.remarks.forEach((item) => (item.active = 0));
			this.remarks[index].active = 1;
			this.remark = this.remarks[index].label;
		},
		handleTextareaInput(e) {
			this.remark = e.detail.value;
			if (e.detail.value.length >= 50) {
				uni.showToast({ icon: 'none', title: '最多备注50个字符' });
				return;
			}
		},
		submit() {
			// this.$store.commit('SET_REMARK', this.remark)\
			// console.log(this.remark);
			this.SET_REMARK(this.remark);
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
// 页面样式有报错
.container {
	background-color: #ffffff;
	padding: 40rpx;
	// height: 100vh;
}

.remarks {
	margin-bottom: 40rpx;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	// font-size: $font-size-base;

	.remark {
		color: $text-color-assist;
		// color: #2e2e2e;
		padding: 10rpx 26rpx;
		// border: 1rpx solid rgba($color: $border-color, $alpha: 0.6);
		border: 1rpx solid $text-color-assist;
		margin-right: 20rpx;

		&.active {
			color: #343434;
			border-color: #343434;
		}
	}
}

.textarea-box {
	.textarea {
		height: 300rpx;
		width: 100%;
		border: 1rpx solid $text-color-assist;
		// border: 1rpx solid rgba($color: $border-color, $alpha: 0.6);
		padding: 20rpx;
		// font-size: $font-size-medium;
	}
}
</style>
